<template>
  <div>
    <el-card class="box-card">
      <div class="app-container">
        <div class="container-header">
          <div class="hign-line"></div>
          <div class="header-left">
            {{$t('inventoryManagement.baseInfo')}}
          </div>
        </div>
        <el-descriptions class="margin-top"
                         :column="3"
                         size="small"
                         border>
          <el-descriptions-item>
            <template slot="label">
              {{$t('inventoryManagement.materialName')}}
            </template>
            {{queryParams.materialName}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{$t('inventoryManagement.materialNo')}}
            </template>
            {{queryParams.materialCode}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{$t('inventoryManagement.supplierName')}}
            </template>
            {{queryParams.supplierName}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{$t('outlier.lot')}}
            </template>
            {{queryParams.lot}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{$t('outlier.happenTime')}}
            </template>
            {{queryParams.checkTime}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{$t('assigns.handler')}}
            </template>
            {{queryParams.assigneeName}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{$t('outlier.dec')}}
            </template>
            {{queryParams.problemDescription}}
          </el-descriptions-item>
        </el-descriptions>
        <div class="container-header"
             style="margin-bottom: 20px">
          <div class="hign-line"></div>
          <div class="header-left">
            {{$t('outlier.inspectionInfo')}}
          </div>
        </div>
        <el-form :model="queryParams"
                 :inline="false"
                 ref="queryForm"
                 label-width="110px">
          <el-col :span="8">
            <el-form-item :label="$t('outlier.parameterName')"
                          prop="parameterName">
              <el-input v-model="queryParams.parameterName"
                        :placeholder="$t('public.placeholder',{placeholder: $t('outlier.parameterName')})"
                        clearable
                        disabled
                        size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('outlier.usl')"
                          prop="usl">
              <el-input v-model="queryParams.usl"
                        :placeholder="$t('public.placeholder',{placeholder: $t('outlier.usl')})"
                        clearable
                        disabled
                        size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('outlier.nominal')"
                          prop="nominal">
              <el-input v-model="queryParams.nominal"
                        :placeholder="$t('public.placeholder',{placeholder: $t('outlier.nominal')})"
                        clearable
                        disabled
                        size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('outlier.lsl')"
                          prop="lsl">
              <el-input v-model="queryParams.lsl"
                        :placeholder="$t('public.placeholder',{placeholder: $t('outlier.lsl')})"
                        clearable
                        disabled
                        size="small" />
            </el-form-item>
          </el-col>
          <!--          <el-col :span="8">-->
          <!--            <el-form-item :label="$t('outlier.ucl')"-->
          <!--                          prop="ucl">-->
          <!--              <el-input v-model="queryParams.ucl"-->
          <!--                        :placeholder="$t('public.placeholder',{placeholder: $t('outlier.ucl')})"-->
          <!--                        clearable-->
          <!--                        disabled-->
          <!--                        size="small" />-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <el-col :span="8">
            <el-form-item :label="$t('outlier.max')"
                          prop="max">
              <el-input v-model="queryParams.max"
                        :placeholder="$t('public.placeholder',{placeholder: $t('outlier.max')})"
                        clearable
                        disabled
                        size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('outlier.min')"
                          prop="min">
              <el-input v-model="queryParams.min"
                        :placeholder="$t('public.placeholder',{placeholder: $t('outlier.min')})"
                        clearable
                        disabled
                        size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('outlier.range')"
                          prop="range">
              <el-input v-model="queryParams.range"
                        :placeholder="$t('public.placeholder',{placeholder: $t('outlier.range')})"
                        clearable
                        disabled
                        size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('outlier.sigma')"
                          prop="sigma">
              <el-input v-model="queryParams.sigma"
                        :placeholder="$t('public.placeholder',{placeholder: $t('outlier.sigma')})"
                        clearable
                        disabled
                        size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('outlier.originalValue')"
                          prop="originalValue">
              <el-input v-model="queryParams.originalValue"
                        :placeholder="$t('public.placeholder',{placeholder: $t('outlier.originalValue')})"
                        clearable
                        disabled
                        size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('outlier.averageValue')"
                          prop="averageValue">
              <el-input v-model="queryParams.averageValue"
                        :placeholder="$t('public.placeholder',{placeholder: $t('outlier.averageValue')})"
                        clearable
                        disabled
                        size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('outlier.spcRule')"
                          prop="spcRule">
              <el-input v-model="queryParams.spcRule"
                        :placeholder="$t('public.placeholder',{placeholder: $t('outlier.spcRule')})"
                        clearable
                        disabled
                        size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('outlier.outOfSpec')"
                          prop="outOfSpec">
              <el-input v-model="queryParams.outOfSpec"
                        :placeholder="$t('public.placeholder',{placeholder: $t('outlier.outOfSpec')})"
                        clearable
                        disabled
                        size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('outlier.xbarChart')"
                          prop="xbarChart">
              <el-input v-model="queryParams.xbarChart"
                        :placeholder="$t('public.placeholder',{placeholder: $t('outlier.xbarChart')})"
                        clearable
                        disabled
                        size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('outlier.interimMeasure')"
                          prop="interimMeasure">
              <el-input v-model="queryParams.interimMeasure"
                        :placeholder="$t('public.placeholder',{placeholder: $t('outlier.interimMeasure')})"
                        clearable
                        maxlength="1000"
                        :disabled="isView"
                        type="textarea"
                        size="small" />
            </el-form-item>
          </el-col>
        </el-form>
      </div>
    </el-card>
    <div class="submit-footer">
      <el-button icon="el-icon-close"
                 size="small"
                 @click="closeTab"
                 class="drawer-close">{{$t('public.close')}}</el-button>
      <el-button type="primary"
                 v-if="isCheck"
                 @click="submitForm"
                 size="small"
                 icon="el-icon-check">{{$t('public.submit')}}</el-button>
    </div>
  </div>
</template>

<script>
import { getStateCheckById, getSpecimenById, stateDealWith } from '@/api/specimenManagement/specimen'
import FileUploadInput from '@/components/FileUploadInput'
export default {
  name: 'outliersDetail',
  components: {
    FileUploadInput,
  },
  data () {
    return {
      queryParams: {
        parameterName: undefined, //检验参数
        usl: undefined, //规格上限
        nominal: undefined, //目标值
        lsl: undefined, //规格下限
        ucl: undefined, //控制上限
        max: undefined, //最大值
        min: undefined, //最小值
        range: undefined, //极差
        sigma: undefined, //标准差
        originalValue: undefined, //单值
        averageValue: undefined, //均值
        spcRule: undefined, //返回spc判异准则
        outOfSpec: undefined, //是否超规格
        xbarChart: undefined, //xbar图是否受控
        interimMeasure: undefined, //临时措施
      },
      // 遮罩层
      loading: false,
      isCheck: false,
      isView: false,
    }
  },
  created () {
    this.id = this.$route.params.id
    if (this.$route.query.type == "check") {
      this.isView = true
      this.getList()
    } else {
      this.getDetail()
    }
  },
  methods: {
    submitForm () {
      this.loading = true
      stateDealWith(this.queryParams).then((res) => {
        this.loading = false
        if (res.code == 200) {
          this.$message.success('提交成功!')
          this.closeTab()
        } else {
          this.$modal.error(res.msg)
        }
      })
    },
    closeTab () {
      this.$tab.closeOpenPage('/outliers')
    },
    getList () {
      this.loading = true
      getSpecimenById({ id: this.id }).then((response) => {
        if (response.code == 200 && response.data) {
          this.queryParams = response.data
        }
        this.loading = false
      })
    },
    getDetail () {
      this.loading = true
      getStateCheckById({ id: this.id }).then((response) => {
        if (response.code == 200 && response.data) {
          this.isCheck = true
          this.queryParams = response.data
          if (!(!!response.data.assigneeName)) {
            this.queryParams.assigneeName = this.$store.getters.name
            this.queryParams.assigneeId = this.$store.getters.userId
          }
        }
        this.loading = false
      })
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-card {
  padding-top: 20px;
  border: 0px;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  padding-bottom: 20px;
}
::v-deep .el-aside {
  padding: 0;
  margin-bottom: 0;
}
.content-style {
  border: 0px;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
  border-radius: 2px;
  background-color: white;
  margin-top: 10px;
}
::v-deep .el-button-group .selBtn {
  background: #fff;
  border: 1px solid #0b7be3;
  color: #0b7be3;
}
::v-deep .el-button-group .unselBtn {
  background: #fff;
  border: 1px solid #ededf2;
  color: #666666;
}
.header-left {
  float: left;
  font-size: 14px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #333333;
  line-height: 40px;
  display: flex;
  justify-content: center;
}
.header-right {
  float: right;
}
.container-header {
  float: left;
  width: 100%;
  border-bottom: 1px solid #ededf2;
  padding-left: 12px;
}
.container-table {
  float: left;
  margin-top: 6px;
  width: 100%;
  //   max-height: calc(100vh - 600px);
  overflow: auto;
}
.mb8 {
  float: left;
  margin-top: 6px;
  width: 100%;
}
.drawer-footer {
  display: flex;
  position: relative;
  z-index: 9999;
  bottom: -40px;
  height: 40px;
  justify-content: center;
  width: 100%;
}
.hign-line {
  position: relative;
  left: -8px;
  top: 14px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid #0b7be3;
  float: left;
}
.drawer-close {
  background: #f7f8fa;
  border-color: #f7f8fa;
}
.submit-footer {
  height: 52px;
  background: #ffffff;
  box-shadow: 0px -5px 5px 0px rgba(0, 0, 0, 0.08);
  border-radius: 4px 4px 0px 0px;
  position: fixed;
  z-index: 9;
  bottom: 0px;
  width: 100%;
  left: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.samplingPercent {
  position: absolute;
  z-index: 9;
  right: 20px;
}
::v-deep .el-card {
  padding-top: 0px;
  max-height: calc(100vh - 200px);
  overflow: auto;
}
::v-deep .el-form-item__label {
  font-weight: 400;
  color: #999999;
}
.margin-top {
  margin-top: 5px;
  float: left;
  width: 100%;
}
</style>
